<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "addCountButton",
  //emits：组件内部触发的所以自定义事件，当为子组件绑定自定义事件的时候有提示，emits有两种写法：数组和对象
  //数组写法：emits: ["addcount"],
  //对象写法：emits:{ addcount:(count)=>{ } }
  emits: {
    addcount: (count) => {
      if (count <= 100) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    add(count) {
      // this.$emit('自定义事件名称','要传递的值')触发父组件为子组件绑定的自定义事件，第一个参数是事件名，第二个参数是值
      this.$emit("addcount", count)
    }
  }
})
</script>

<template>
  <div class="add">
    <button @click="add(1)">+1</button>
    <button @click="add(10)">+10</button>
    <button @click="add(20)">+20</button>
  </div>
</template>

<style scoped lang="less">

</style>
